import React, { Component } from 'react';

import './index.scss';

export default class TableSelect extends Component {
    constructor(props) {
        super(props)

        this.state = {
            listShow: false
        }
    }

    showList () {
        this.setState({
            listShow: !this.state.listShow
        })
    }

    onSelectChange(data, cid, index){
        this.setState({ 
            listShow: false, 
            selectValue: data.title
        });

        this.props.onSelectChange(data, cid, index);
    }

    componentDidMount () {
        this.setState({ 
            selectValue: this.props.defaultValue 
        })
    }

    render () {

        const { fieldData, selectIdx, cid } = this.props,
              { listShow, selectValue } = this.state;

        return (
            <div className="table-select">
                <div onClick={ this.showList.bind(this) }>
                   <i className="iconfont icon-arrow-down"></i>
                   <button
                    className="value-show"
                    onClick={ this.showList.bind(this) }>
                        { selectValue }
                   </button>
                </div>
                <ul className={ ["option-list", listShow ? 'show' : '' ].join(' ') }>
                    <li 
                     className="option-item"
                     onClick={ this.onSelectChange.bind(this, {id: 0, title: '无分类'}, cid, selectIdx) }
                    >无分类</li>
                    {
                      fieldData.map((item, index) => {
                        return (
                            <li
                             className="option-item"
                             key={ index } 
                             onClick={ this.onSelectChange.bind(this, item, cid, selectIdx) } 
                            >{ item.title }</li>
                        )
                      })
                    }
                </ul>
            </div>
        );
    }
}